<template>
     <div class="thought">
         <div class="carousel">
                <ul class="list">
                    <li class="current"><img src="../../assets/img/1.jpg" alt="1"></li>
                    <li><img src="../../assets/img/2.png" alt="2"></li>
                    <li><img src="../../assets/img/12.jpg" alt="12"></li>
                </ul>
                <ul class="count">
                    <li class="current"></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>

          
            <div class="subtitle">
                <div class="do-html-content">
                    <p style="text-align:center;line-height:1.2;">
                        <span style='font-size: 22px; font-family: "Times New Roman", Times, serif;'>
                  —— <span style="color:rgb(251,127,127);">ROLEX </span> 真爱珠宝 ———
                        </span>
                    </p>
                    <p style="text-align:center;line-height:1.2;">
                        <span style='font-size: 12px; font-family: "Times New Roman", Times, serif; color: rgb(153, 153, 153);'>
                Special love for special you, let you have a lifetime of happiness
              </span>
                    </p>
                </div>

            </div>
            <div class="do-siteFrame">
                <div class="app-img" id="action_translateY">
                    <div class="left-img wow fadeInLeftBig animated">
                        <img src="../../assets/img/4.png" alt="">
                    </div>
                    <div class="right-img">
                        <div class="left-part wow fadeInRight animated">
                            <img src="../../assets/img/5.jpg" alt="">
                        </div>
                        <div class="right-part wow fadeInRight animated">
                            <img src="../../assets/img/6.jpg" alt="">
                        </div>
                        <div class="bottom-part wow fadeInUp animated">
                            <div class="detail">
                                <p style="line-height:1.1;">
                                    <br>
                                </p>
                                <p style="line-height:1.1;">
                                    <span style="font-size: 20px; color: rgb(255, 255, 255);">品牌故事</span>
                                </p>

                                <p style="line-height:1.1;">
                                    <span style="font-size: 16px; color: rgb(255, 255, 255);">Brand story</span>
                                </p>

                                <p style="text-align: justify; line-height: 1.5;">
                                    <span style="color: rgb(255, 255, 255);">
                                    多少年来，有多少无法用言语表达的爱意，就有多少ROLEX的忠实顾客。每一件ROLEX产品背后都传递着一份深厚的情谊，也因此ROLEX被大家称为"会说话的珠宝"。今天，尽显国际珠宝艺术精华的ROLEX因充满甜蜜与祝福被人们视为爱的最好的礼物，它所承载的已不仅仅是对美好爱情的祝愿。越来越多的人通过ROLEX来传递对家人、对朋友、对长辈的深情厚谊。真爱表达无需言语t！
                                </span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="subtitle">
                <div class="do-html-content">
                    <p style="text-align:center;line-height:1.2;">
                        <span style='font-size: 22px; font-family: "Times New Roman", Times, serif;'>
                  —— <span style="color:rgb(251,127,127);">ROLEX </span> 真爱珠宝 ———
                        </span>
                    </p>
                    <p style="text-align:center;line-height:1.2;">
                        <span style='font-size: 12px; font-family: "Times New Roman", Times, serif; color: rgb(153, 153, 153);'>
                Special love for special you, let you have a lifetime of happiness
              </span>
                    </p>
                </div>
            </div>
            <div class="do-title-content">
                <div class="do-row">
                    <div class="do-left">
                        <div class="do-left-body">
                            <a href=""><img src="../../assets/img/7.jpg" alt="/">
                             <div class="image_action">
                               <h2>初夏系列</h2>
                                <h4>(纯爱项链)</h4>
                              </div>
                            </a>
                        </div>
                        <div class="do-left-theme">
                            <div class="do-element-text">
                                <p>
                                    <span style="color: rgb(255, 255, 255); font-size: 24px;">ROLEX品牌设计</span>
                                </p><br>
                                <p>
                                    <span style="color: rgb(255, 255, 255); font-size: 16px;">唯有真·钻动心</span>
                                </p>
                                <p style="text-align:right;">
                                    <span style="color: rgb(255, 255, 255);">幸福璀璨，因你们坚定的永恒无尽闪耀</span>
                                </p>
                                <p style="text-align:right;">
                                    <span style="color: rgb(255, 255, 255);">Happiness is bright, because you are firm and eternal. </span>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="do-right">
                        <div class="do-right-body">
                            <a href=""><img src="../../assets/img/10a.jpg" alt="">
                              <div class="sub_action">
                                 <h2>爱的旅程系列</h2>
                                 <h4>(真诚对戒)</h4>
                              </div>
                            </a>
                        </div>
                        <div class="do-right-html">
                            <div class="small-theme">
                                <p style="text-align:center">
                                </p><br>
                                <p style="text-align:center">
                                </p><br>
                                <p style="text-align:center">
                                    <span style="color: rgb(255, 255, 255); font-size: 22px;">爱的真钻,恒久相伴</span>
                                </p><br>
                                <p style="text-align:center">
                                    <span style="color: rgb(255, 255, 255);">True diamond, forever.</span>
                                </p>
                                <p style="text-align:center">
                                </p><br>
                                <p style="text-align:center">
                                </p><br>
                            </div>
                            <div class="small-img">
                                <a href="http://www.baidu.com"><img src="../../assets/img/11a.png" alt="">
                                <div class="sup_action">
                                 <h2>初夏系列</h2>
                                 <h4>(纯爱项链)</h4>
                              </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="do-news-condition">
                <div class="do-news-left">
                    <img src="../../assets/img/11.jpg" alt="" class="img-zoomable">
                </div>
                <div class="do-news-center">
                    <div class="do-news-theme">
                        <p style="text-align: left; line-height: 1.1;">
                            <span style='font-family: "Microsoft YaHei", 微软雅黑, MicrosoftJhengHei, 华文细黑, STHeiti, MingLiu; font-size: 18px; color: rgb(51, 51, 51);'>
                                新闻动态
                          </span>
                            <span style='font-family: "Microsoft YaHei", 微软雅黑, MicrosoftJhengHei, 华文细黑, STHeiti, MingLiu; color: rgb(187, 187, 187);'>
                          完美品质，屡获殊荣
                        </span>
                            <h4>
                                <p class="" style="line-height: 1.8;"></p>
                                <img src="http://bk.image.styleweb.com.cn/2017/06/16/74ab73e45afa9dd9090a07efdad52d02.jpeg" alt="" class="fr-dii">
                                <p class="" style="line-height: 1.8;">· 一枚婚戒引发的「暴」06-23</p>
                            </h4>
                            <p>· 常见的珠宝首饰保养知识 07-13</p>
                        </p>
                        <p>· 一场「消费权利」的抢班夺权 07-12</p>
                        <p>· 从「细分」走向「稀分」06-23</p>
                        <p>· 新零售与珠宝行业有什么关联 07-06</p>
                    </div>
                </div>
                <div class="do-news-right">
                    <a href=""><img src="../../assets/img/12a.jpg" alt=""></a>
                </div>
            </div>
        </div>
</template>

<script>
 
 import   '../../assets/css/animate.css'
 export default {
 
   data () {
      return {
        slides: [  // 图片的src,图片的超链接
          {
            src: '../../assets/img/1.jpg',
            href: ''
          },
          {
            src: '../../assets/img/2.jpg',
            href: ''
          },
          {
            src: '../../assets/img/12.jpg',
            href: ''
          },
          
        ],
        inv: 3000,  // 图片自动切换速度
        styleObject: {  // 轮播盒子的宽高
          width: '1200px',
          height: '600px'
        },
        transitionName: 'move',  // 轮播的方式,可选move(左右滑动效果),fade(淡入淡出效果)
        target: '_self' // 超链接打开的方式,默认为_blank
      }
    }
  }
</script>

<style scode>
    *{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
  .thought{
    width: 100%;
}
.slide{
    width: 1200px;
       height: 600px;
       margin: 0 auto;
       border-radius: 5px;
       position: relative;
      
}
.slideshow{
    width:1200px;
    height:600px;
}
.slideshow ul{
    margin:0;
    padding:0;
    list-style:none;
}
.slideshow  img{
    width:1200px;
    height:600px;
}
.slideshow li {
    position: absolute;
    left: 5px; 
    top: 5px;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity 2s ease;
}
.bar {  
    position: absolute;  
    width: 100%;  
    bottom: 10px;  
    margin: 0 auto;  
    z-index: 10;  
    text-align: center;  
  }  
  .bar span {  
    width: 20px;  
    height: 5px;  
    border: 1px solid;  
    background: white;  
    display: inline-block;  
    margin-right: 10px;  
  }  
  .active {  
    background: red !important;  
  }  
 .carousel{
       width: 1200px;
       height: 600px;
       margin: 0 auto;
       border-radius: 5px;
       position: relative;
     
     }  
  .swiper-box .swiper-image{
    width: 1200px;
    height: 600px;
  }
  .carousel ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.carousel .list img{
    width: 1200px;
    height: 600px;
}

.carousel .list li{
    position: absolute;
    left: 5px; 
    top: 5px;
    opacity: 0;
    filter: alpha(opacity=0);
    transition: opacity 2s ease;
}

.carousel .list li.current{
    opacity: 1;
    filter: alpha(opacity=100);
}
.carousel .count{
    position: absolute;
    right: 10px;
    bottom: 10px;
}
.carousel .count li{
    float: left;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    text-align: center;
    color: gray;
    font-weight: bold;
    margin-left: 5px;
}
.carousel .count li.current{
    background: white;
}  

.subtitle{
     width: 100%;
     height: 130px;
     margin-top: 20px;
}
.subtitle .do-html-content{
    padding-top: 50px;

}
.do-siteFrame {
  
  
}
 .do-siteFrame .app-img{
    width: 1200px;
    height: 510px;
    margin: 0 auto;
    
} 
  .app-img .left-img{
    width: 490px;
    height: 510px;
   display: inline-block;
}
.left-img img{
    width: 490px;
    height: 510px;  
}
 .app-img .right-img{
     float: right;
    width: 705px;
    height: 510px;
  }  
.right-img {
    display: flex;
    flex-wrap: wrap;
}
.right-img .left-part img{
    width: 337px;
    height: 247px;
    margin-left: 10px;
     transition: all 0.6s;  
    
}
.left-part img:hover{
     
}
.right-img .right-part img{
     width: 337px;
    height: 247px;
    margin-left: 10px;
}
 .right-img .bottom-part{
    width: 682px;
    height: 250px;
    margin-left: 10px;
    margin-top: 10px;
    background: #FF8383;
} 
  .bottom-part .detail{
        width: 620px;
        height: 192px;
        margin: 0 auto;
        margin-top: 25px;
}
   
 .do-title-content{
     width: 100%;
     height: 540px;
      
 }
 .do-title-content .do-row{
     width: 1200px;
     height: 540px;
    margin:  0 auto;
 }  
 .do-row{
        display: flex
    }
 .do-row .do-left{
         width: 591px;
         height: 540px;
        }
  .do-left .do-left-body img{
           width: 591px;
           height: 310px;
         
  } 
 .do-left .do-left-theme{
     width: 590px;
     height: 215px;
     margin-top: 8px;
     background: #FF8383;
 }
 .do-left-theme .do-element-text {
     width: 530px;
     height: 180px;
     margin-top: 8px;
     margin-left: 20px;
    
 }
 .do-row .do-right{
   width: 610px;
   height: 540px;
  
}
.do-right {
    display: flex;
}
.do-left-body{
	 margin-right: 1px; 
	position: relative;
}
.do-left-body:hover div.image_action{
    opacity: 0.5;
}

.image_action{
    position: absolute;
    width:590px;
    height:310px;
    
    background: black;
    left: 0;
    top: 0;
    opacity: 0; 

}
  
.image_action h2{
    position: absolute;
    bottom: 180px;
    left: 220px;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;	
}
.image_action h4{
    position: absolute;
    bottom: 150px;
    left: 230px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;	
}   

.do-right .do-right-body img{
    width: 286px;
    height: 536px;
    margin-left: 8px; 
}
.do-right-body {
    margin-right: 1px; 
	position: relative;
}
.do-right-body:hover div.sub_action{
    opacity: 0.5;
}
.sub_action{
    position: absolute;
     width: 286px;
    height: 536px;;
    background: black;
    left: 0;
    top: 0;
    opacity: 0; 
    margin-left: 8px; 
}
 

.sub_action h2{
    position: absolute;
    bottom: 270px;
    left: 80px;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;	
}
.sub_action h4{
    position: absolute;
    bottom: 200px;
    left: 100px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;	
}   

.do-right .do-right-html{
    width: 302px;
    height: 534px;
     margin-left: 8px;
}
.do-right-html .small-theme{
    width: 300px;
    height: 208px;
    background: #FF8383;
}
.do-right-html .small-img img{
    width: 300px;
    height: 320px;
    margin-top: 10px;
}
.small-img {
    margin-right: 1px; 
	position: relative;
}
.small-img:hover div.sup_action{
    opacity: 0.5;
}
.sup_action{
    position: absolute;
     width: 300px;
    height: 322px;
    background: black;
    left: 0;
    top: 0;
    opacity: 0; 
    margin-top: 8px;
}
 

.sup_action h2{
    position: absolute;
    bottom: 180px;
    left: 100px;
    font-size: 20px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 3px;	
}
.sup_action h4{
    position: absolute;
    bottom: 150px;
    left: 120px;
    color: #fff;
    font-size: 12px;
    text-transform: uppercase;	
}  
.do-news-condition{
    width: 1200px;
    height: 265px;
    margin:  0 auto;
    margin-top: 16px;
    display: flex;
} 
.do-news-left img{
    width: 393px;
    height: 265px;
}
.do-news-center {
    width: 393px;
    height: 265px;
    margin-left: 25px;
   background: #FBFBFB;
}
.do-news-theme {
    width: 326px;
    height: 202px;
     margin: 0 auto;
     margin-top: 40px;
}
.do-news-right img{
    width: 354px;
    height: 265px;
    margin-left: 27px;
    cursor: pointer;  
    transition: all 0.6s; 
}  
.do-news-right img:hover{
    transform: scale(1.4);  
}
</style>